<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>抽奖机</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
    <style>
        @import 'normalize.css';

        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }

        body {
            display: grid;
            place-items: center;
            min-height: 100vh;
            font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif, system-ui;
        }

        body::before {
            --line: color-mix(in lch, canvasText 25%, transparent);
            --size: 40px;
            content: '';
            height: 100vh;
            width: 100vw;
            position: fixed;
            background: linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size);
            -webkit-mask: linear-gradient(-15deg, transparent 60%, white);
            mask: linear-gradient(-15deg, transparent 60%, white);
            top: 0;
            z-index: -1;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        .bear-link {
            color: canvasText;
            position: fixed;
            top: 1rem;
            left: 1rem;
            width: 48px;
            aspect-ratio: 1;
            display: grid;
            place-items: center;
            opacity: 0.8;
        }

        :where(.x-link, .bear-link):is(:hover, :focus-visible) {
            opacity: 1;
        }

        .bear-link svg {
            width: 75%;
        }

        .machine {
            display: flex;
            gap: 1rem;
            justify-content: center;
        }

        button {
            background: color-mix(in lch, canvasText, canvas calc(30% * var(--intent, 0)));
            color: canvas;
            border-radius: 6px;
            font-weight: 300;
            cursor: pointer;
            transition: background 0.2s;
        }

        button:is(:hover, :focus-visible) {
            --intent: 1;
        }

        .machine__numbers {
            display: flex;
            position: relative;
        }

        .machine__numbers::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(color-mix(in lch, canvasText, canvas 65%), transparent 10px calc(100% - 10px), color-mix(in lch, canvasText, canvas 65%)), linear-gradient(white, transparent 20% 80%, color-mix(in lch, canvasText, canvas 75%));
        }

        :root {
            --ease: linear(0 0%, 0.7871 2.92%, 1.3024 5.5%, 1.6128 8.07%, 1.6962 9.4%, 1.7331 10.78%, 1.7332 11.67%, 1.7161 12.6%, 1.6291 14.65%, 1.136 21.61%, 0.9679 24.51%, 0.869 27.14%, 0.8392 28.47%, 0.8217 29.84%, 0.8168 31.71%, 0.8317 33.78%, 0.8622 35.91%, 0.9975 43.68%, 1.0286 46.58%, 1.0439 49.53%, 1.0459 51.54%, 1.0421 53.76%, 1.0013 63.48%, 0.9894 68.99% 73.67%, 1.0023 87.89%, 1 100%);
        }

        .machine__number {
            width: 20vmin;
            position: relative;
            aspect-ratio: 1 / 1.25;
            background: url(https://assets.codepen.io/605876/numbers.svg) 50% calc(5vmin + (var(--iterations, 0) * 15vmin)) / 75%;
        }

        @media (prefers-reduced-motion:no-preference) {
            .machine__number {
                transition: background-position 1s var(--ease);
            }

            .machine__number:nth-of-type(1) {
                transition-duration: 1s;
            }

            .machine__number:nth-of-type(2) {
                transition-duration: 1.1s;
            }

            .machine__number:nth-of-type(3) {
                transition-duration: 1.2s;
            }
        }

        .machine__number::before {
            content: '';
            position: absolute;
            inset: -1px;
            -webkit-mask: linear-gradient(transparent, white, transparent);
            mask: linear-gradient(transparent, white, transparent);
            border-inline: 2px solid color-mix(in lch, canvasText, canvas 65%);
        }

        .machine__number:nth-of-type(2)::before {
            border-inline: 1px solid color-mix(in lch, canvasText, canvas 65%);
        }
    </style>
</head>

<body>
    <div class="machine">
        <div aria-hidden="true" class="machine__numbers">
            <div class="machine__number"></div>
            <div class="machine__number"></div>
            <div class="machine__number"></div>
        </div>
        <p aria-live="polite" class="sr-only">000</p>
        <button>Go!</button>
    </div>

    <script>
        const go = document.querySelector('button');
        const numbers = document.querySelectorAll('.machine__number');
        const result = document.querySelector('[aria-live="polite"]');
        let slides = [0, 0, 0];

        const slide = () => {
            const first = Math.floor(Math.random() * 20 + 10);
            const second = first + Math.floor(Math.random() * 10 + 10);
            const third = second + Math.floor(Math.random() * 10 + 10);
            slides = [slides[0] + first, slides[1] + second, slides[2] + third];
            for (let n = 0; n < numbers.length; n++) {
                const number = numbers[n];
                number.style.setProperty('--iterations', slides[n]);
            }
            result.innerText = slides
                .map((slide) => 10 - (slide % 10))
                .map((r) => (r === 10 ? 0 : r))
                .join('');
        };

        go.addEventListener('click', slide);
    </script>
</body>

</html>